<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/">
<head>
	<title>gWeather</title>
	<meta name="title" content="gWeather" />
	<meta name="author" content="ehaagwlke" />
	<meta name="website" content="http://uwa-ow.googlecode.com/" />
	<meta name="description" content="Based on Google Weather Api, you can add as many cities as you can, and you counld see the weather for four days" />
	<meta name="version" content="alpha" />
	<meta name="keyword" content="weather forecast,tianqi,tq," />
	<meta name="thumbnail" content="http://news.bbc.co.uk/nol/shared/img/bbc_news_120x60.gif" />
	<meta name="screenshot" content="http://1821.img.pp.sohu.com.cn/images/2008/6/19/16/4/11b450290ea.jpg" />
	<meta name="debugMode" content="true" />
	
	<widget:preferences>
		<preference type="list" name="cityList" label="City" onchange="true" onrefresh="true" defaultValue="beijing">
			<option label="北京" value="beijing" />
			<option label="上海" value="shanghai" />
			<option label="天津" value="tianjin" />
		</preference>
	</widget:preferences>
	<style type="text/css">
		#gWeather{ font-size:12px; font-family:"Microsoft Yahei","宋体",sans-serif;}
		#gWeather h2{text-align:center}
		#gWeather ul{ list-style:none}
		#gWeather h3{ text-align:center; }
		#gWeather p,ul,h3,h4{ padding:2px; margin:2px}
		#gWeather #today{ width:35%; float:left; border-right:1px solid #eeeeee}
		#gWeather #today h4{ text-align:center; }
		#gWeather #today img{ float:left; padding:5px;}
		#gWeather #forecast{ text-align:center }
		#gWeather #forecast ul li{float:left; padding: 0 5px;}
	</style>
	<script type="text/javascript">
		//<![CDATA[
			var city;
			var url;
			function getCity(){
				if(widget.getValue('cityList')){
					city = widget.getValue('cityList');
				}else{
					city = 'beijing';
				}
				url = 'http://www.google.com/ig/api?hl=zh-cn&weather='+city;
			}

			widget.dataInt = function() {
				getCity();
				UWA.Data.getXml(
					url,
					widget.dataProcessor
					);
			}
			widget.dataProcessor = function(xml){
				widget.body.empty();
				var root = xml.documentElement;
				var output='';
				var fc_output='';
				var w = root.firstChild;

				if(w.childNodes.length > 0){
					var fi = w.getElementsByTagName('forecast_information')[0];
					var city = fi.childNodes[0].getAttribute('data');
					var fDate = fi.childNodes[4].getAttribute('data');
					
					var fi_output = '<div id="gWeather"><h3>'+city +'('+fDate+')</h3>';

					var cc = w.getElementsByTagName('current_conditions')[0];
					var condition = cc.childNodes[0].getAttribute('data');
					var tf = cc.childNodes[1].getAttribute('data');
					var tc = cc.childNodes[2].getAttribute('data');
					var h = cc.childNodes[3].getAttribute('data');
					var img = cc.childNodes[4].getAttribute('data');
					var wc = cc.childNodes[5].getAttribute('data');
					var wsArr = wc.split('、');

						img = 'http://www.google.com'+img;

					var cc_output = '<div id="container"><div id="today"><h4>此刻</h4><img src="'+img+'" alt="'+condition+'" title="'+condition+'" /><ul><li>'+condition+'</li><li>'+tf +'&deg;F | '+tc+'&deg;C</li><li>'+h+'</li>'+'<li>'+wsArr[0]+'</li><li>'+wsArr[1]+'</li></ul></div>';

					fc_output +='<div id="forecast"><ul>';
					var fc = w.getElementsByTagName('forecast_conditions');
						for(i=0;i<fc.length;i++){
							var day = fc[i].getElementsByTagName('day_of_week')[0].getAttribute('data');
							var low = fc[i].getElementsByTagName('low')[0].getAttribute('data');
							var high = fc[i].getElementsByTagName('high')[0].getAttribute('data');
							var icon = fc[i].getElementsByTagName('icon')[0].getAttribute('data');
							var conditions = fc[i].getElementsByTagName('condition')[0].getAttribute('data');
							fc_output += '<li><p>'+day+'</p>'+'<img src="http://www.google.com'+icon+'" alt="'+conditions+'" /><p>'+low+'|'+high+'&deg;C</p><p>'+conditions+'</p></li>';
						}
					fc_output +='</ul><div style="clear:both;"></div></div></div></div>';
					output = fi_output + cc_output+fc_output;

				}else{
					output = '啊哦，Google天气API出错了！';
				}

				widget.setBody(output);
			}



			widget.onLoad = function(){
				widget.setBody('Loading data.....');
				getCity();
				widget.dataInt();
			}
			
			widget.onRefresh = function() {
				getCity();
				widget.body.empty();
				widget.setBody('Loading data.....');
				widget.dataInt();
			}

			widget.onResize = function(){
				getCity();
				widget.body.empty();
				widget.setBody('Loading data.....');
				widget.dataInt();
			}
			
		//]]>
	</script>
</head>
<body>
	<div class="content">Loading data.....</div>
</body>
</html>